import { onMounted, reactive, ref } from 'vue'
import { useQuasar } from 'quasar'

export function useCrud(apiService, initialParams = {}) {
  const $q = useQuasar()
  // 模拟数据

  // 列表数据及分页信息
  const dataList = ref([])
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  })

  // 筛选参数
  const searchParams = reactive({ ...initialParams })
  const loading = ref(false)

  // 获取数据列表
  const fetchData = async () => {
    loading.value = true
    // $q.loading.show({
    //   message: '加载中...',
    // })

    try {
      // 模拟 API 响应数据
      const mockData = {
        list: [
          {
            amount: 1000,
            id: 1,
            username: '张三',
            email: 'zhangsan@example.com',
            phone: '13800138001',
            status: 1,
            role: '管理员',
            createTime: '2024-01-01',
            department: '技术部',
          },
          {
            amount: 2000,
            id: 2,
            username: '李四',
            email: 'lisi@example.com',
            phone: '13800138002',
            status: 0,
            role: '普通用户',
            createTime: '2024-01-02',
            department: '市场部',
          },
          {
            amount: 3000,
            id: 3,
            username: '王五',
            email: 'wangwu@example.com',
            phone: '13800138003',
            status: 1,
            role: '运营',
            createTime: '2024-01-03',
            department: '运营部',
          },
          {
            amount: 4000,
            id: 4,
            username: '赵六',
            email: 'zhaoliu@example.com',
            phone: '13800138004',
            status: 1,
            role: '开发',
            createTime: '2024-01-04',
            department: '技术部',
          },
          {
            amount: 5000,
            id: 5,
            username: '钱七',
            email: 'qianqi@example.com',
            phone: '13800138005',
            status: 0,
            role: '测试',
            createTime: '2024-01-05',
            department: '技术部',
          },
          {
            amount: 6000,
            id: 6,
            username: '孙八',
            email: 'sunba@example.com',
            phone: '13800138006',
            status: 1,
            role: '产品',
            createTime: '2024-01-06',
            department: '产品部',
          },
          {
            amount: 7000,
            id: 7,
            username: '周九',
            email: 'zhoujiu@example.com',
            phone: '13800138007',
            status: 1,
            role: '设计',
            createTime: '2024-01-07',
            department: '设计部',
          },
          {
            amount: 8000,
            id: 8,
            username: '吴十',
            email: 'wushi@example.com',
            phone: '13800138008',
            status: 0,
            role: '财务',
            createTime: '2024-01-08',
            department: '财务部',
          },
        ],
        total: 8,
      }

      dataList.value = mockData.list
      pagination.total = mockData.total
    } catch (error) {
      $q.notify({
        type: 'negative',
        message: '获取数据失败',
      })
      console.error('Fetch error:', error)
    } finally {
      loading.value = false
      // $q.loading.hide()
    }
  }

  // 添加或编辑数据
  const saveData = async (formData, isEdit = false) => {
    try {
      if (isEdit) {
        await apiService.update(formData)
        $q.notify({
          type: 'positive',
          message: '编辑成功',
        })
      } else {
        await apiService.add(formData)
        $q.notify({
          type: 'positive',
          message: '添加成功',
        })
      }
      await fetchData()
    } catch (error) {
      $q.notify({
        type: 'negative',
        message: isEdit ? '编辑失败' : '添加失败',
      })
      console.error('Save error:', error)
    }
  }

  // 删除数据
  const deleteData = async (ids) => {
    try {
      await apiService.delete({ ids })
      $q.notify({
        type: 'positive',
        message: '删除成功',
      })
      await fetchData()
    } catch (error) {
      $q.notify({
        type: 'negative',
        message: '删除失败',
      })
      console.error('Delete error:', error)
    }
  }

  // 重置筛选参数并刷新列表
  const resetSearch = async () => {
    Object.keys(searchParams).forEach((key) => {
      searchParams[key] = initialParams[key] || ''
    })
    await fetchData()
  }

  // 分页切换
  const handlePageChange = async (page) => {
    pagination.currentPage = page
    await fetchData()
  }

  const handleSizeChange = async (size) => {
    pagination.pageSize = size
    await fetchData()
  }

  onMounted(fetchData)

  return {
    dataList,
    pagination,
    searchParams,
    loading,
    fetchData,
    saveData,
    deleteData,
    resetSearch,
    handlePageChange,
    handleSizeChange,
  }
}
